<template>
	<view class="detailLayout">
		<view class="soupDetail">
			<soup-tab-group></soup-tab-group>
			<soup-text-content :lookState="true"></soup-text-content>
		</view>
		
		<view class="comment">
			<view class="list">
				<view class="row">
					<comment-item :subReply="true"></comment-item>
				</view>
			</view>
		</view>
		<view class="interactive">
			<interactive-bar :showType="1" @comment="handelComment"></interactive-bar>
			<view class="safe-area-bottom"></view>
		</view>
	</view>
	
	<uni-popup type="bottom" ref="commentPopup">
		<comment-reply></comment-reply>
	</uni-popup>
</template>

<script setup>
import { ref } from 'vue';
	
const commentPopup = ref(null);

// 打开评论框
const handelComment = ()=>{
	commentPopup.value.open();
}
	

</script>

<style lang="scss" scoped>
	.detailLayout{
		.soupDetail{
			padding: 50rpx 30rpx;
			border-bottom: 12rpx solid #F7F7F7;
		}
		.comment{
			
		}
		.interactive{
			border: 1rpx solid red;
			position: fixed;	// 固定定位
			width: 100%;
			bottom: 0;
			left: 0;
			background: #fff;
			border-top: 1rpx solid #e4e4e4;
		}
	}

</style>
